<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析页</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script> 
        //绘制饼图 
        function drawCircle(canvasId, data_arr, color_arr, text_arr) 
        { 
            var c = document.getElementById(canvasId); 
            var ctx = c.getContext("2d"); 
            var radius = c.height / 2 - 20; //半径 
            var ox = radius + 20, oy = radius + 20; //圆心 
            var width = 30, height = 10; //图例宽和高 
            var posX = ox * 2 + 20, posY = 30;   // 
            var textX = posX + width + 5, textY = posY + 10; 
            var startAngle = 0; //起始弧度 
            var endAngle = 0;   //结束弧度 
            for (var i = 0; i < data_arr.length; i++) 
            { 
                //绘制饼图 
                endAngle = endAngle + data_arr[i] * Math.PI * 2; 
                //结束弧度 
                ctx.fillStyle = color_arr[i]; 
                ctx.beginPath(); 
                ctx.moveTo(ox, oy); //移动到到圆心 
                ctx.arc(ox, oy, radius, startAngle, endAngle, false); 
                ctx.closePath(); 
                ctx.fill(); 
                startAngle = endAngle; //设置起始弧度 
                //绘制比例图及文字 
                ctx.fillStyle = color_arr[i]; 
                ctx.fillRect(posX, posY + 20 * i, width, height); 
                ctx.moveTo(posX, posY + 20 * i); 
                ctx.font = 'bold 12px 微软雅黑';    //斜体 30像素 微软雅黑字体 
                ctx.fillStyle = color_arr[i]; //"#000000"; 
                var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%"; 
                ctx.fillText(percent, textX, textY + 20 * i); 
            } 
        } 
        function init() 
        {
            //绘制饼图 
            //比例数据和颜色 
            var data_arr = [40/250, 24/250, 20/250, 14/250, 14/250, (250-40-24-20-14-14)/250]; 
            var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400", '#5F9EA0', '#191970']; 
            var text_arr = ['人民文学出版社', "上海译文出版社", "生活.读书.新知三联书店", "译林出版社", "南海出版公司", "其他"];
            drawCircle("canvas_circle", data_arr, color_arr, text_arr);
            var data_arr_2 = [3557786.0/15586972, 1332307.0/15586972, 1216963.0/15586972, 599999.0/15586972, 2644816.0/15586972, 1-(3557786.0/15586972 + 1332307.0/15586972 + 1216963.0/15586972 + 599999.0/15586972 + 2644816.0/15586972)]; 
            var color_arr_2 = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400", '#5F9EA0', '#191970']; 
            var text_arr_2 = ['人民文学出版社', "上海译文出版社", "生活.读书.新知三联书店", "译林出版社", "南海出版公司", "其他"];
            drawCircle("canvas_circle_2", data_arr_2, color_arr_2, text_arr_2);
        }
        //页面加载时执行init()函数
        window.onload = init;
	</script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div>
                <form class="navbar-form navbar-right"  method="POST" action="{% url 'app:book_search' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search Book" name="bookname">
                    </div>
                    <button type="submit" class="btn btn-default">Search</button>
                </form>
            </div>
            <div class="navbar-header">
                <a class="navbar-brand" href={% url 'app:index' %}>APP主页</a> 
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href={% url 'app:pie_graph' %}>饼状图</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            柱状图
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href={% url 'app:bar_chart' %}>柱状图一</a></li>
                            <li><a href={% url 'app:bar_chart_2' %}>柱状图二</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            出版社排行
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href={% url 'app:publish_house_info_1' %}>所获评分最高</a></li>
                            <li><a href={% url 'app:publish_house_info_2' %}>评价人次最多</a></li>
                            <li><a href={% url 'app:publish_house_info_3' %}>出版优秀图书最多</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <br/><br/>
    
    <table width="100%">
        <tbody>
            <tr class="item">
                <td  valign="top">
                    <h2 align='left'>各出版社出版图书数量所占比例</h2><br/><br/>
                    <div>
                        <canvas id="canvas_circle" width="800" height="450">
                        浏览器不支持canvas
                        </canvas>
                    </div>
                </td>
                <td valign="top">
                    <div align='right'>
                        <h2 align='left'>各出版社出版图书评价评价人次所占比例</h2><br/><br/>
                        <canvas id="canvas_circle_2" width="800" height="450">
                        浏览器不支持canvas
                        </canvas>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</body>
</html>